<style scoped>

</style>

<template>
  <div class="__article-view-con">
    <Card>
      <head-tool @on-add-article="handleAddArticle" @on-search-article="handleSearchArticle"/>

      <div v-if="!searchMode">
        <article-table :data="page.data" :loading="tableLoading"
                    @on-update-article="handleUpdateArticle"
                    @on-remove-article="handleRemoveArticle"/>
        <Row type="flex" justify="end" style="margin-top: 20px;">
          <Col>
            <!-- 分页 -->
            <Page :current.sync="page.current"
                  :page-size="page.pageSize"
                  :total="page.total"
                  @on-change="_handlePageChange"></Page>
          </Col>
        </Row>
      </div>
      <div v-else>
        <article-table :data="searchPage.data"  :loading="tableLoading"
                    @on-update-article="handleUpdateArticle"
                    @on-remove-article="handleRemoveArticle"/>
        <Row type="flex" justify="end" style="margin-top: 20px;">
          <Col>
            <!-- 分页 -->
            <Page :current.sync="searchPage.current"
                  :page-size="searchPage.pageSize"
                  :total="searchPage.total"
                  @on-change="_handleSearchPageChange"></Page>
          </Col>
        </Row>
      </div>


      <!--<type-table :data="page.data"-->
      <!--:loading="tableLoading"-->
      <!--@on-update-article="handleUpdateArticle"-->
      <!--@on-remove-article="handleRemoveArticle"/>-->
      <!--<Row type="flex" justify="end" style="margin-top: 20px;">-->
      <!--<Col>-->
      <!--&lt;!&ndash; 分页 &ndash;&gt;-->
      <!--<Page :current.sync="page.current"-->
      <!--:page-size="page.pageSize"-->
      <!--:total="page.total"-->
      <!--@on-change="_handlePageChange"></Page>-->
      <!--</Col>-->
      <!--</Row>-->
    </Card>
  </div>
</template>

<script>
  import {mapState, mapActions} from 'vuex'
  import {_ChildLoading} from '_libs/util'
//  import excel from '@/libs/excel'
  import config from '@/config'
  import ArticleTable from './component/table'
  import HeadTool from './component/head-tool'

  export default {
    name: "articleView",
    data() {
      return {
        page: {
          current: 1,
          pageSize: 13,
          total: 0,
          data: []
        },
        searchPage: {
          current: 1,
          pageSize: 14,
          total: 0,
          data: []
        },
        searchMode: false,
        searchTableData: [],
        tableLoading: false
      }
    },
    computed: {
      ...mapState('home', {
        tableData: state => state.article.articleList
      })
    },
    methods: {
      ...mapActions('home/article', [
        'listArticle',
        'addArticle',
        'updateArticle',
        'removeArticle'
      ]),
      // 更改分页数据
      changePageData() {
        let page = this.page
        page.data = []
        let start = (page.current - 1) * page.pageSize;
        let end = start + page.pageSize
        if (end >= this.tableData.length) {
          page.data = this.tableData.slice(start)
        }
        page.data = this.tableData.slice(start, end)
      },

      // 分页组件事件
      _handlePageChange() {
        this.changePageData();
      },

      // 搜索分页事件
      _handleSearchPageChange() {
        this.changeSearchPageData();
      },

      // 更改搜索分页数据
      changeSearchPageData() {
        let page = this.searchPage
        page.data = []
        let start = (page.current - 1) * page.pageSize;
        let end = start + page.pageSize
        if (end >= this.searchTableData.length) {
          page.data = this.searchTableData.slice(start)
        }
        page.data = this.searchTableData.slice(start, end)
      },

      // 初始化Table数据
      _initTableData() {
        this.listArticle().then(data => {
          this.page.total = data.length;
          this.changePageData();
        });
      },

      // 处理搜索
      handleSearchArticle(search) {
        console.log(search)
        if (search.word === '') {
          this.searchMode = false;
          return
        }
        this.searchMode = true
        let searchRes = [];
        let regExp = new RegExp(search.word)
        let tableData = this.tableData;
        let key = 'name';
        for (let i in tableData) {
          let data = tableData[i];
          if (regExp.test(data[key])) {
            searchRes.push(data);
          }
        }
        this.searchTableData = searchRes;
        this.searchPage.total = searchRes.length
        this._handleSearchPageChange()
      },

      // 添加文章
      handleAddArticle(module, loadingCb) {
        let res = this.addArticle(module);
        _ChildLoading(res, () => {
          this.$Message.success('文章添加成功')
          this._initTableData()
        }, loadingCb)

      },

      // 更新文章
      handleUpdateArticle(module, loadingCb) {

        let res = this.updateArticle(module);
        _ChildLoading(res, () => {
          this.$Message.success('文章更新成功')
        }, loadingCb)

      },

      // 删除文章
      handleRemoveArticle(module, loadingCb) {
        let res = this.removeArticle(module);
        _ChildLoading(res, () => {
          this.$Message.success('文章删除成功')
          this._initTableData()
        }, loadingCb)

      },
    },
    created() {
      this.tableLoading = true
      this.listArticle().then(data => {
        this.page.total = data.length;
        this.changePageData();
        // 获取所有功能
        this.tableLoading = false;
      });
    },
    components: {
      ArticleTable,
      HeadTool
    }

  }
</script>


